<template>
  <a-card>
    <div class="table-operator">
      <a-row class="row-item-search">
        <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
      <!-- 这里可以添加其他搜索条件，如店铺名称的输入框 -->
      <a-form-item label="统计时间">
        <a-month-picker v-model="selectedMonth" format="YYYY-MM" @change="handleMonthChange" />
      </a-form-item>
      <a-form-item class="search-btn">
        <a-button class="mr-15" type="primary" icon="search" html-type="submit">搜索</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-form-item>
      <a-form-item class="search-btn">
        <!-- 导出按钮 -->
        <a-button
            class="btn-main"
            type="primary"
            icon="download"
            @click="handleExport"
            :loading="isBtnLoading"
        >导出</a-button>
      </a-form-item>
      <a-form-item v-if="excelPath">
        文件导出成功：<a :href="excelPath" target="_blank">点击下载</a>
      </a-form-item>
        </a-form>
      </a-row>
    </div>

    <!-- 列表内容 -->
    <div class="table-wrapper">
      <div class="ant-table  ant-table-default ant-table-bordered">
        <div class="ant-table-content">
          <div class="">
            <div class="ant-table-body">
              <table style="width: 100%;">
                <thead class="ant-table-thead">
                <tr>
                  <th v-for="(item, index) in columns" :key="index">
                        <span class="ant-table-header-column">
                          <div>
                            <span class="ant-table-column-title">{{ item.title }}</span>
                          </div>
                        </span>
                  </th>
                </tr>
                </thead>
                <tbody class="ant-table-tbody">
                <template v-for="(item) in orderList.data">
                  <tr>
                    <td>
                      <span class="mr-20">{{ item.month }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.store_id }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.store_name }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.zone_name }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.waimai }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.tangshi }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.wallet }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.balance }}</span>
                    </td>
                    <td>
                      <span class="mr-20">{{ item.price }}</span>
                    </td>
                  </tr>

                </template>
  <!--              <tr><td colspan="6" style="text-align: right">总金额：</td></tr>-->
                </tbody>
              </table>
            </div>
            <!-- 空状态 -->
            <a-empty v-if="!orderList.data.length" :image="simpleImage" />
            <!-- 分页器 -->
            <div v-if="orderList.data.length" class="pagination">
              <a-pagination
                  :current="page"
                  :pageSize="orderList.per_page"
                  :total="orderList.total"
                  :show-total="total => `共 ${orderList.total} 条`"
                  @change="onChangePage"
              />
              <div>
                每页显示：{{ orderList.per_page }} 条
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </a-card>
</template>

<script>
import storage from 'store'
import moment from 'moment'
import { Empty } from 'ant-design-vue'
import { inArray, assignment , isEmpty } from '@/utils/util'
import * as Api from "@/api/statistics/data";
import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
  PayStatusEnum,
  ReceiptStatusEnum
} from '@/common/enum/order'
import {PaymentMethodEnum} from "@/common/enum/payment";
import {GoodsItem, UserItem} from "@/components/Table";
import PlatformIcon from "@/components/PlatformIcon";

const LOCAL_DATA_KEY = 'merchant_order_export_form'
export default {
  components: {PlatformIcon, GoodsItem, UserItem},
  data() {
    return {
      // 订单类型
      dataType: this.getDataType(),
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      selectedMonth: '', // 区域选择
      // 正在加载
      isLoading: false,
      isBtnLoading: false,
      // 当前页码
      page: 1,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条目数
      total: 0, // 总条目数
      orderList: [], // 表格数据源
      excelPath: '', // 导出文件路径
      columns: [
        {
          title: '统计时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '店铺ID',
          dataIndex: 'store_id',
          key: 'store_id',
        },
        {
          title: '店铺名称',
          dataIndex: 'store_name',
          key: 'store_name',
        },
        {
          title: '所属区域',
          dataIndex: 'zone_name',
          key: 'zone_name',
        },
        {
          title: '外卖单',
          dataIndex: 'waimai',
          key: 'waimai',
          formatter: value => `￥${value.toFixed(2)}`,
        },
        {
          title: '堂食单',
          dataIndex: 'tangshi',
          key: 'tangshi',
          formatter: value => `￥${value.toFixed(2)}`,
        },
        {
          title: '个人钱包支付',
          dataIndex: 'wallet',
          key: 'wallet',
          formatter: value => `￥${value.toFixed(2)}`,
        },
        {
          title: '补贴支付',
          dataIndex: 'balance',
          key: 'balance',
          formatter: value => `￥${value.toFixed(2)}`,
        },
        {
          title: '总金额',
          dataIndex: 'price',
          key: 'price',
          formatter: value => `￥${value.toFixed(2)}`,
        }
        // 可以根据需要添加更多列
      ],
      // 区域选项
      regions: [
        { value: '', label: '请选择' },
        { value: 'region1', label: '区域1' },
        { value: 'region2', label: '区域2' },
        // ... 其他区域
      ],
      // 其他响应式数据...
    };
  },
  beforeCreate () {
    // 批量给当前实例赋值
    assignment(this, {
      inArray,
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderSourceEnum,
      OrderStatusEnum,
      PayStatusEnum,
      ReceiptStatusEnum,
      PaymentMethodEnum,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    })
  },
  watch: {
    // 监听路由变化
    $route () {
      this.init()
    }
  },
  created () {
    // 初始化页面
    this.init()
  },
  methods: {
    // 初始化页面
    init () {
      this.searchForm.resetFields()
      this.queryParam = {}
      this.handleRefresh(true)
    },
    // 获取当前标签
    getDataType () {
      return this.$route.path.split('/')[1].replace('-', '_')
    },
    // 获取列表数据
    getList () {
      const { dataType, selectedMonth, queryParam, page } = this
      this.isLoading = true
      return Api.mdata({ dataType, selectedMonth, ...queryParam, page })
          .then(response => {
            this.orderList = response.data.list
            this.orderList.total = response.data.list.total

          })
          .finally(() => this.isLoading = false)
    },
    // 将表单数据保存到本地 (15天)
    onSave2Local (data) {
      storage.set(LOCAL_DATA_KEY, data, 15 * 24 * 60 * 60 * 1000)
    },
    // 设置默认值
    setFieldsValue () {
      // 从本地获取缓存数据
      const data = storage.get(LOCAL_DATA_KEY)
      if (!isEmpty(data)) {
        data.betweenTime = [moment(data.betweenTime[0]), moment(data.betweenTime[1])]
        // 设置默认表单内容
        const { myForm: { setFieldsValue } } = this
        this.$nextTick(() => setFieldsValue(data))
      }
    },
    // 提交到后端api
    onFormSubmit (data) {
      const { selectedMonth, queryParam } = this

      const app = this
      app.isLoading = true
      app.isBtnLoading = true
      app.excelPath = ''

      Api.exportMerchantOrder({selectedMonth, ...queryParam}).then(result => {
        // 显示提示信息
        app.$message.success(result.message, 1.5)
        // 刷新历史导出记录
        app.excelPath = result.data.path
      })
      .finally(result => {
        app.isLoading = false
        app.isBtnLoading = false
      })
    },
    handleMonthChange (date, dateString) {
      // 处理月份改变事件
      this.selectedMonth = dateString
    },
    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh (bool = false) {
      bool && (this.page = 1)
      this.getList()
    },
    // 确认搜索
    handleSearch (e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          this.queryParam = { ...this.queryParam, ...values }
          this.handleRefresh(true)
        }
      })
    },
    handleExport () {
      this.searchForm.validateFields((error, values) => {
        if (!error) {

          this.queryParam = { ...this.queryParam, ...values }
         // this.handleRefresh(true)
          // 将表单数据保存到本地
          this.onSave2Local(values)
          // 提交到后端api
          this.onFormSubmit(values)
        }
      })
    },
    // 重置搜索表单
    handleReset () {
      this.searchForm.resetFields()
    },

    // 翻页事件
    onChangePage (current) {
      this.page = current
      this.handleRefresh()
    },
    // 处理时间范围变化
    handleTimeRangeChange(value) {
      // 根据value设置dateRange，这里需要写逻辑将value转换为moment对象数组
      // 或者调用API获取默认的时间范围
      // 然后调用fetchData方法
      this.fetchData();
    },
    // 处理时间段变化
    handleDateRangeChange(value, dateString) {
      // 这里value是moment对象数组，dateString是字符串数组
      // 可以直接使用value作为dateRange
      this.dateRange = value;
      this.fetchData();
    },
    // 调用API获取数据
    fetchData() {
// 这里应该有一个方法根据当前的时间范围、分页等参数来调用API
// 伪代码示例：
// this.axios.get('/api/orders/statistics', {
//   params: {
//     startTime: this.dateRange[0].format('YYYY-MM-DD'),
//     endTime: this.dateRange[1].format('YYYY-MM-DD'),
//     page: this.currentPage,
//     pageSize: this.pageSize,
//     // 可以添加其他参数
//   }
// }).then(response => {
//   this.data = response.data.list;
    }
  }
}
</script>

<style scoped>
/* 添加一些基本的边距和填充来美化卡片 */
.ant-card {
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 自定义表格的样式 */
.ant-table {
  margin-top: 20px;
}

/* 自定义分页组件的样式 */
.ant-pagination {
  margin-top: 20px;
  float: right; /* 将分页组件放置在右侧 */
}

/* 自定义日期选择器和选择框的样式（如果需要的话） */
.ant-select {
  width: 120px; /* 确保选择框的宽度一致 */
  margin-right: 10px; /* 在选择框之间添加一些间距 */
}

.ant-range-picker {
  width: 200px; /* 自定义日期选择器的宽度 */
}

/* 表格列的样式（如果需要的话） */
.ant-table-thead > tr > th {
  background-color: #f0f2f5; /* 自定义表头背景色 */
  color: #333; /* 自定义表头文字颜色 */
}

/* 表格行的悬停样式 */
.ant-table-tbody > tr:hover > td {
  background-color: #f9f9f9; /* 自定义行悬停时的背景色 */
}

/* 其他自定义样式... */
</style>